import { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min"
import FxyhsjglApi from "../../../../../../utils/apis/FxyhsjglApi";
import { Button, Card, Checkbox, Form, Input, Select ,message} from 'antd';
import FetchHelper from "../../../../../../utils/helper/fetch-helper";

export default function FxyhEdit() {
    const [dynamicForms, setDynamicForms] = useState();
    const [idDatas, setIdDatas] = useState();
    // const [componentDisabled, setComponentDisabled] = useState(true);
    const [form] = Form.useForm();
    const history = useHistory();
    const id = useParams()?.id
    const [params, setParams] = useState({
        pageSize: 10,
        pageNum: 1
    })

    useEffect(() => {
        FxyhsjglApi.fxyhEditDynamicApi().then(datas => {
            setDynamicForms(datas)
        })
    }, [])
    useEffect(() => {
        if (params) {
            FxyhsjglApi.listId(id).then(resp => {

                setIdDatas(resp.data)
                console.log(resp.data)
                form.setFieldsValue({
                    ...resp.data,

                })
            })
        }
    }, [id, form, params])

    const quxiaoHandle = () => {
        history.push(`/manager/fxyhsjgl`)
    }
    //保存
    const onFinish = (values) => {
       
        for (const key in idDatas) {
            if (values.hasOwnProperty(key)) {
                idDatas[key] = values[key]
            }
        }
        FetchHelper.putJson(`/admin-api/ybyj/yhsj`, idDatas).then(resp => {
            if (resp.code === 200) {
                message.success("修改成功");
                history.push(`/manager/fxyhsjgl`)
            } else {
                message.error("修改失败!" + resp.msg);
            }

        })
            .catch(err => {
                message.error("修改失败: " + err.message); // 显示具体错误信息
            });
    }

return <div className='layout-h h100' style={{
    overflow: "scroll"
}}>
    {/* <Card className='h100 fill w0' style={{
          position: "relative",
        }} >
          <BusinessMap />
    
        </Card> */}
    <Card className='h100 fill' style={{
        height: "1500px"
    }}>
        <Form method="post"
            onFinish={onFinish}
            form={form}>
            <header style={{
                fontSize: 20,
                fontWeight: "bold"
            }}>隐患数据编辑</header>
            <hr />

            <div className="InputForm" style={{
                display: "flex",
                flexWrap: "wrap"
            }}>
                {idDatas !== undefined && dynamicForms !== undefined && dynamicForms.map((formItem) => {
                    let node;
                    switch (formItem.type) {
                        case 'select':
                            node = <Select></Select>;
                            break;
                        case 'input':
                        default:
                            node = <Input style={{
                                width: "90%"
                            }}
                           ></Input>
                    }

                    return <div style={{
                        flexBasis: "33%",
                        marginBottom: "10px"
                    }}><Form.Item
                        label={formItem.alias}
                        name={formItem.name}

                        //   disabled={componentDisabled}
                        rules={[
                            {
                                //   required: true,
                                //disable: true

                            }
                        ]}

                    >
                            {node}
                        </Form.Item></div>
                })}

            </div>



            <div className="layout-h">
                <Button className="btn1" type="primary"
                    htmlType="submit"
                >保存</Button>

                <Button onClick={quxiaoHandle} className="btn2">返回</Button>
            </div>
        </Form>
    </Card>


</div>
}